<template>
  <div>
      <Header></Header>
<!-- 搜索 -->
      <div class="top">
          <div class="container clearfix">
              <div class="logo leftfix">
                    <img width="190px" height="120px" src="../assets/logo.png" alt="ssh">
              </div>
              <div class="search rightfix">
                  <form>
                      <input type="text" placeholder="请输入您要搜索的内容...">
                      <button type="submit"><span style="line-height: 39px;color: #eeeeee">
                          <el-icon   style="width: 50px;height: 35px;" class="el-icon-search
"></el-icon>
                      </span>
                      </button>
                  </form>
              </div>
          </div>

      </div>
<!-- 主导航区 -->
      <div class="main-nav">
          <div class="container clearfix">
              <div class="all-types leftfix">
                  全部商品分类
              </div>
              <ul class="main-nav-list leftfix">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">红茶</a></li>
                    <li><a href="#">白茶</a></li>
                    <li><a href="#">乌龙茶</a></li>
                    <li><a href="#">喜茶</a></li>
                    <li><a href="#">哈哈茶</a></li>
                    <li><a href="#">学习茶</a></li>
                    <li><a href="#">算数茶</a></li>
              </ul>
          </div>
          <hr class="clearfix" style="background-color: #B91C1C;height: 2px;border: none">
      </div>
      <router-view/>
      <Bottom></Bottom>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Bottom from "@/components/Bottom.vue";
export default {
    name: "Home",
    components:{
        Header,
        Bottom
    }
}
</script>

<style>

//1
.search{
    margin: auto 0;
}
.top{
    height: 120px;

}
.top form{
    margin-top: 42px;
    font-size: 0;
}

.top input{
    width: 510px;
    height: 35px;
    border: 2px solid #B91C1C;

}
.top input,button{
   outline: none;
    border-radius: 2px;
}
.top button{
    margin-left: -80px;
    height: 39px;
    width: 80px;
    border: none;
    vertical-align: top;
    background-color: #B91C1C;
}

//2
.main-nav{
    height: 48px;

    border-bottom: 2px solid #B91C1C;

}
.main-nav-list{
    line-height: 48px;
}
.main-nav .all-types{
        width: 190px;
        height: 48px;
        line-height: 48px;
        background-color: #B91C1C;
        color: white;
        text-align: center;
        font-size: 16px;
}
.main-nav .all-types:hover{
    color: #05bee1;
}
.main-nav-list li{
    list-style: none;
    float: left;
    margin: 0 10px;
    font-size: 16px;
}
.main-nav-list a{
    text-decoration: none;
    color: #4d4d4d;
}

.main-nav-list a:hover{
    color: #05bee1;
}


</style>